import QtQuick 1.1
//import Qt 4.7
import QtWebKit 1.0
import com.nokia.meego 1.0
import QtMobility.location 1.2
import "./js/js.js" as Js
import "./style_qml"
//import TextButton as TButton

Page {
    orientationLock: PageOrientation.LockPortrait

    id: root
    width: 480
    height: 854

    //////////////////////////////       Switch map and data panel
    function switch_map_panel()
    {
        web_view_map.state === 'state1' ? web_view_map.state = "" : web_view_map.state = 'state1' ;
        inputpanel.state === 'state1' ? inputpanel.state = "" : inputpanel.state = 'state1' ;
        bottom_menu.switch_state();
    }

    //////////////////////////////       startup function
    function startup()
    {
        root.set_notification_loader(3000, "欢迎使用AesyPig！");
//        if (mainApp.getdrivecity() !== null && mainApp.getdrivecity() !== " " && mainApp.getdrivecity() !== "") //1 line changed in 11.05.27
//        {
//            web_view_map.city = mainApp.getdrivecity();
//            js.city = mainApp.getdrivecity();
//            console.log("startup... " + js.city + " , " + web_view_map.city);
//        }

    }
    Component.onCompleted:
    {
        root.startup();
    }//startup();

    //////////////////////////////       convert coordinate to address by sogou API
    function sogou_convertAddress()
    {
        function convertAddress() {}
        convertAddress.prototype = {
            update: function(result)
                    {
                        if(result.error_msg == null)
                        {
                            if(result.status == "error") {
                                console.log("result error : " + result.response.error.msg);
                                set_notification_loader(3000, "错误：" + result.response.error.msg)

                            }
                            else if(result.status == "ok") {
                                console.log("result address : " + result.response.data[0].address);
                                set_position_info_loader(result.response.data[0].address,
                                                         result.response.data[0].district,
                                                         result.response.data[0].city,
                                                         result.response.data[0].province
                                                         );

                            }
                        }
                        else {

                        }
                    }
        }

//        APIsRequest.getDomainUrl(glValue.loginUserName, new requestDomainUrl());
        Js.sogouLatLontoAddressAPI(new convertAddress(), positionSource.position.coordinate.latitude , positionSource.position.coordinate.longitude);
    }

    //////////////////////////////       global DataContainer
    DataContainer
    {
        id: data_container
        width: 0
        height: 0
    }

    //////////////////////////////       GPS position
    PositionSource {
        id: positionSource
        updateInterval: 5000
        active: true
        // nmeaSource: "nmealog.txt"

        onPositionChanged:
        {
            console.log("position : " + position.coordinate.latitude + " , " + position.coordinate.longitude)
//            web_view_map.setcenter(position.coordinate.latitude,position.coordinate.longitude);
        }
    }

    //////////////////////////////       webview interface
    WebView {
        id: web_view_map
        x: 0
        y: 0
        width: 480
        height: 767/*parent.height - 87*/

        preferredHeight: 767
        preferredWidth: 480
        //anchors.fill: parent
        url: "sogoutest_1.html"

        property string start: ""
        property string end: ""
        property string city: ""
        property string lat: "23.0"
        property string lon: "117.0"

        settings.javascriptEnabled : true
        settings.javaEnabled : true
        settings.pluginsEnabled : true
//        settings.privateBrowsingEnabled : true
//        settings.javascriptCanAccessClipboard : true
//        settings.javascriptCanOpenWindows : true
//        settings.localContentCanAccessRemoteUrls : true
        settings.offlineWebApplicationCacheEnabled : true
        settings.offlineStorageDatabaseEnabled : true
        settings.localStorageDatabaseEnabled : true

        pressGrabTime: 0

        onAlert: console.log("alert: " + message)

        onLoadFinished: init();

        function init()
        {
            evaluateJavaScript("map.setCenter(" + js.ini_center + "," + js.ini_level + ")");
            console.log("init map : " + js.ini_center + "," + js.ini_level);
            js.zoom_level = js.ini_level;
        }

        function setcenter ()
        {
            //console.log("setcenter");
            // baidu map
//            web_view_map.lat = mainApp.getlatitude();
//            web_view_map.lon = mainApp.getlongtitude();
//            console.log(web_view_map.lat + " , " + web_view_map.lon);
//            evaluateJavaScript("map.panTo(new BMap.Point('"+ web_view_map.lon + "', '"+ web_view_map.lat + "'))");

            // sogou map
//            evaluateJavaScript("sogou.maps.Convertor.translate(new sogou.maps.LatLng(" + lat + "," + lon + "),1,positionCallback);");
            evaluateJavaScript("map.panTo(new sogou.maps.LatLng(" + positionSource.position.coordinate.latitude + "," + positionSource.position.coordinate.longitude + "))");
        }

        function panto (sogouxy)
        {
            evaluateJavaScript("map.panTo(new sogou.maps.Point(" + sogouxy + "))");
        }

        function setxy(mapx,mapy,level)
        {
            evaluateJavaScript("map.setCenter(new sogou.maps.Point("
                               + mapx + "," + mapy + "), " + level + ")");
        }

        function set_marker(xy)
        {
            evaluateJavaScript("marker = new sogou.maps.Marker({map: map, position: new sogou.maps.Point(" + xy + ")})");
        }

        function eva_js(str)
        {
            evaluateJavaScript(str);
        }

        function zoomIn()
        {
//            evaluateJavaScript("map.zoomIn()");
//             console.log("fuck..1....");
            // for sogou map zoom in
            if (js.zoom_level < 18)
            {
                js.zoom_level++;
                evaluateJavaScript("map.setZoom(" + js.zoom_level + ")");
            }
        }

        function zoomOut()
        {
//            evaluateJavaScript("map.zoomOut()");
//            console.log("fuck..2....");
            // for sogou map zoom out
            if (js.zoom_level > 0)
            {
                js.zoom_level--;
                evaluateJavaScript("map.setZoom(" + js.zoom_level + ")");
            }
        }

        function setCity(cityname)
        {
            //var aa = evaluateJavaScript("myGeo.getPoint('" + cityname + "', function(point){if (point) {map.centerAndZoom(point, 11);}}, '" + cityname + "');");

            //百度API v1.2的更新使上语句失效，改为下语句

            evaluateJavaScript("map.centerAndZoom('" + cityname + "');");
            mainApp.setDrivecity(cityname);
            //console.log(aa);
        }

        function getRoute()
        {
            evaluateJavaScript("map.clearOverlays()");
            evaluateJavaScript("transit.search('" + web_view_map.start + "', '" + web_view_map.end + "');");
            console.log("get route executed");
            //web_view_map.html.search.
        }

        function getDrive()
        {
            evaluateJavaScript("map.clearOverlays()");
            evaluateJavaScript("driving.search('" + web_view_map.start + "', '" + web_view_map.end + "');");
            console.log("get drive executed");
            //web_view_map.html.search.
        }

        function search(addr)
        {
            evaluateJavaScript("local.search('" + addr + "');");
        }

        function setsearchresult_poi (poi)
        {
            evaluateJavaScript("map.clearOverlays()");
            evaluateJavaScript("map.addOverlay(new BMap.Marker(new BMap.Point("+ poi + ")))");
/* bug */            //evaluateJavaScript("map.centerAndZoom(new BMap.Point("+ poi + ", 7))");
            evaluateJavaScript("map.panTo(new BMap.Point(" + poi + "))");
            //evaluateJavaScript("map.centerAndZoom(new BMap.Point("+ poi + "))");

        }

        function mappanby(x,y)
        {
            evaluateJavaScript("map.panBy(" + x + "," + y + ");");
        }

        ////////////////////////////////////////////////      move the map to a pixel point
        ////////////////////////////////////////////////      should be meego's bug?
//        MouseArea {

//            anchors.fill : parent

//            property bool mouseDown : false
//            property int lastX : -1
//            property int lastY : -1

//            hoverEnabled : true

//            onPressed : {
//                mouseDown = true
//                lastX = mouse.x
//                lastY = mouse.y
//            }
//            onReleased : {
//                mouseDown = false
//                lastX = -1
//                lastY = -1
//            }
//            onPositionChanged: {
//                if (mouseDown) {
//                    var dx = mouse.x - lastX
//                    var dy = mouse.y - lastY
//                    web_view_map.mappanby(dx, dy)
//                    lastX = mouse.x
//                    lastY = mouse.y
//                }
//            }
//            onDoubleClicked: {
//                //                     map.center = map.toCoordinate(Qt.point(mouse.x, mouse.y))
//                //                     map.zoomLevel += 1
//                web_view_map.zoomIn();
//            }
//        }

        /////////////////////////////////////////////////// //  js for html inside the WebView
        javaScriptWindowObjects: QtObject {
         id:js
         WebView.windowObjectName: "qml"

         property string ini_center: "new sogou.maps.Point(" + data_container.setting_sogou_last_lat + ")"
         property int ini_level: data_container.setting_sogou_map_level

         property int zoom_level: 10        // zoom level for sogou map
         onZoom_levelChanged: data_container.setting_sogou_map_level = zoom_level;

         property string route: ""
         property string city: "北京市"
         property string mapbounds: ""
         property string mapcenter: ""
         onMapcenterChanged: data_container.setting_sogou_last_lat = mapcenter;

         property string bus_start: data_container.bus_start_lonlat
         property string bus_end: data_container.bus_end_lonlat

         property string start_poi: ""
         property string end_poi: ""

         onStart_poiChanged: data_container.bus_start_lonlat = "new sogou.maps.Point(" + start_poi + ")";
         onEnd_poiChanged: data_container.bus_end_lonlat = "new sogou.maps.Point(" + end_poi + ")";

//         property string title0: ""
//         property string title1: ""
//         property string title2: ""
//         property string title3: ""
//         property string title4: ""
//         property string title5: ""
//         property string title6: ""
//         property string title7: ""
//         property string title8: ""
//         property string title9: ""

//         property string addr0: ""
//         property string addr1: ""
//         property string addr2: ""
//         property string addr3: ""
//         property string addr4: ""
//         property string addr5: ""
//         property string addr6: ""
//         property string addr7: ""
//         property string addr8: ""
//         property string addr9: ""

//         property string poi0: ""
//         property string poi1: ""
//         property string poi2: ""
//         property string poi3: ""
//         property string poi4: ""
//         property string poi5: ""
//         property string poi6: ""
//         property string poi7: ""
//         property string poi8: ""
//         property string poi9: ""

         function searchsuccess()
         {
             console.log("search success");
             mainApp.useInfobox("搜索成功！");
         }

         function qmlCall() {
             //console.log("fuck..qmlcall from html....");
            //web_view_map.evaluateJavaScript("alert('This call is in QML! oh fuck!!!!!!!')");
//             addressmodel.clear();
//             addressmodel.append({"title" : js.title0 , "addr" : js.addr0 , "poi" : js.poi0 });
//             addressmodel.append({"title" : js.title1 , "addr" : js.addr1 , "poi" : js.poi1 });
//             addressmodel.append({"title" : js.title2 , "addr" : js.addr2 , "poi" : js.poi2 });
//             addressmodel.append({"title" : js.title3 , "addr" : js.addr3 , "poi" : js.poi3 });
//             addressmodel.append({"title" : js.title4 , "addr" : js.addr4 , "poi" : js.poi4 });
//             addressmodel.append({"title" : js.title5 , "addr" : js.addr5 , "poi" : js.poi5 });
//             addressmodel.append({"title" : js.title6 , "addr" : js.addr6 , "poi" : js.poi6 });
//             addressmodel.append({"title" : js.title7 , "addr" : js.addr7 , "poi" : js.poi7 });
//             addressmodel.append({"title" : js.title8 , "addr" : js.addr8 , "poi" : js.poi8 });
//             addressmodel.append({"title" : js.title9 , "addr" : js.addr9 , "poi" : js.poi9 });
             console.log("bounds : " + mapbounds + " center : " + mapcenter);

           }

         function showroute()
         {
             console.log(route);
             //text_route.text = route;
             //flickable1.y = 55;
         }

         function bus_model_append(bus_time, bus_walkdist, bus_line_num, bus_line_names)
         {
             data_container.set_route_model(bus_time, bus_walkdist, bus_line_num, bus_line_names);
         }

         function bus_model_clear()
         {
             data_container.clear_route_model();
         }

         function route_input(inname, inxy, linename, outname, outxy)
         {
             var in_array = new Array();
             in_array = data_container.bus_in_array;
             in_array.push(inname);
             data_container.bus_in_array = in_array;

             var out_array = new Array();
             out_array = data_container.bus_out_array;
             out_array.push(outname);
             data_container.bus_out_array = out_array;

             var inxy_array = new Array();
             inxy_array = data_container.bus_inxy_array;
             inxy_array.push(inxy);
             data_container.bus_inxy_array = inxy_array;

             var linename_array = new Array();
             linename_array = data_container.bus_linename_array;
             linename_array.push(linename);
             data_container.bus_linename_array = linename_array;

             var outxy_array = new Array();
             outxy_array = data_container.bus_outxy_array;
             outxy_array.push(outxy);
             data_container.bus_outxy_array = outxy_array;
         }

         function clear_bus_route()
         {
//             var in_array = new Array();
             data_container.bus_in_array = [];
//             var out_array = new Array();
             data_container.bus_out_array = [];
//             var inxy_array = new Array();
             data_container.bus_inxy_array = [];
//             var outxy_array = new Array();
             data_container.bus_outxy_array = [];
//             var linename_array = new Array();
             data_container.bus_linename_array = [];
         }

         function route_to_navi()
         {
             bus_navi_loader.item.set_model(data_container.bus_in_array, data_container.bus_inxy_array
                                            , data_container.bus_linename_array, data_container.bus_out_array
                                            , data_container.bus_outxy_array);
         }

         function notify(time, str)
         {
             set_notification_loader(time, str);
         }
        }

        states: [
            State {
                name: "state1"
                PropertyChanges {
                    target: web_view_map
                    x:-web_view_map.width
                }
            }
        ]

        transitions: [
            Transition {
                from: ""
                to: "state1"
                NumberAnimation
                {
                    property: "x";
                    duration: 300
                    easing.type: "OutQuad"
                }
            },

            Transition {
                from: "state1"
                to: ""
                NumberAnimation
                {
                    property: "x"
                    duration: 300
                    easing.type: "OutQuad"
                }
            }
        ]

        ///////////////////////////////////////  zoom
        Item {
            id: item_zoom
//            x: 22
//            y: 366
            width: 160
            height: 68
            rotation: -90
//            anchors.left: parent.left
//            anchors.bottom: parent.bottom
//            anchors.leftMargin: 22
//            anchors.bottomMargin: 20
            anchors.verticalCenter: parent.verticalCenter
            anchors.verticalCenterOffset: 70
            anchors.right: parent.right
            anchors.rightMargin: -25

            Image {
                id: image_zoombg
                opacity: 0.4
                anchors.fill: parent
                fillMode: Image.Stretch
                source: "./image/button-white.png"
            }

            Image {
                id: image_zoomplus
                x: 102
                y: -94
                anchors.right: parent.right
                anchors.rightMargin: 0
                scale: 0.2
                source: "./image/jia+.png"

                MouseArea
                {
                    id: zoomplus_button
                    anchors.fill:parent
                    onClicked:
                    {
                        web_view_map.zoomIn();
                        console.log("zoom in button clicked");
                    }
                }

                states: State {
                    name: "pressed"
                    when: zoomplus_button.pressed
                    PropertyChanges {
                        target: image_zoomplus
                        opacity: 0.1
                    }
                }
            }

            Image {
                id: image_zoomminus
                x: 96
                y: 10
                anchors.right: parent.right
                anchors.rightMargin: 9
                source: "./image/minus.png"

                MouseArea
                {
                    id: zoomminus_button
                    anchors.fill:parent
                    onClicked:
                    {
                        web_view_map.zoomOut();
                        console.log("zoom out button clicked");
                    }
                }

                states: State {
                    name: "pressed"
                    when: zoomminus_button.pressed
                    PropertyChanges {
                        target: image_zoomminus
                        opacity: 0.1
                    }
                }
            }
        }

        ///////////////////////////////////////  center image
        Image {
            id: imagecenter
            source: "./image/center.png"
            scale: 0.600
            anchors.centerIn: parent
        }

        ///////////////////////////////////////  city                // useless in 2012.06.03
        Item {
            id: item_city
//            x: 22
//            y: 244
//            width: 80
//            height: 58
            width: 0
            height: 0
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            anchors.leftMargin: 22
            anchors.bottomMargin: 120
            visible: false

            Image {
                id: image_citybg
                opacity: 0.7
                anchors.fill: parent
                source: "./image/button-yellow.png"
            }

            Text {
                id: text1
//                x: 28
//                y: 22
                text: "城市"
                anchors.centerIn: parent
                font.bold: true
                font.pixelSize: 30
            }

            MouseArea
            {
                id: citybutton_MA
                anchors.fill:parent
                onClicked:
                {
                    rectangle_inputcity.state === 'state1' ? rectangle_inputcity.state = "" : rectangle_inputcity.state = 'state1' ;
//                    rectangle_inputcity.x = 200;
                }
            }

            states: State {
                name: "pressed"
                when: citybutton_MA.pressed
                PropertyChanges {
                    target: image_citybg
                    opacity: 0.1
                }
            }
        }

        ///////////////////////////////////////  inputcity           // useless in 2012.06.03
        Rectangle {
            id: rectangle_inputcity
            x: -width
            y: parent.height / 2
//            width: 420
//            height: 100
            width: 0
            height: 0
            color: "#ffffff"
            radius: 8
            visible: false

//            Behavior on x { NumberAnimation{} }

            Rectangle {
                id: rectangle22
                x: 14
                y: 10
                width: 82
                height: 80
                color: "#50f2f7"
                radius: 3

                Text {
                    id: text22
                    x: 8
                    y: 22
                    width: 80
                    height: 20
                    text: "取消"
                    font.pixelSize: 30
                }

                MouseArea
                {
                    anchors.fill:parent
                    onClicked:
                    {
                        rectangle_inputcity.state === 'state1' ? rectangle_inputcity.state = "" : rectangle_inputcity.state = 'state1' ;
//                        rectangle_inputcity.x = -420;
                    }
                }
            }

            Rectangle {
                id: rectangle23
                x: 332
                y: 10
                width: 76
                height: 80
                color: "#50f2f7"
                radius: 3

                Text {
                    id: text23
                    x: 5
                    y: 22
                    width: 80
                    height: 20
                    text: "确定"
                    font.pixelSize: 30
                }

                MouseArea
                {
                    anchors.fill:parent
                    onClicked:
                    {
                        rectangle_inputcity.state === 'state1' ? rectangle_inputcity.state = "" : rectangle_inputcity.state = 'state1' ;
//                        rectangle_inputcity.x = -420;
                        web_view_map.setCity(text_edit_city.text);
                        console.log("set city button clicked");
                    }
                }
            }

            TextEdit {
                id: text_edit_city
                x: 118
                y: 10
                width: 190
                height: 80
                text: "textEdit"
                horizontalAlignment: TextEdit.AlignHCenter
                verticalAlignment: TextEdit.AlignVCenter
                font.pixelSize: 30
            }

            states: [
                State {
                    name: "state1"
                    PropertyChanges {
                        target: rectangle_inputcity
                        x:web_view_map.width / 2 - rectangle_inputcity.width / 2
                    }
                }
            ]

            transitions: [
                Transition {
                    from: ""
                    to: "state1"
                    NumberAnimation
                    {
                        property: "x";
                        duration: 1000
                        easing.type: "InOutQuad"
                    }
                },

                Transition {
                    from: "state1"
                    to: ""
                    NumberAnimation
                    {
                        property: "x"
                        duration: 1000
                        easing.type: "InOutQuad"
                    }
                }
            ]
        }

        //////////////////////////////////////   GPS timer
        Timer
        {
            id:timerUpdatepos
            interval: 10000; running: false; repeat: true; triggeredOnStart : true;
            //        property real lat: 23.0
            //        property real lon: 117.0
            onTriggered:
            {
                //            timerUpdatepos.lat = mainApp.getlatitude();
                //            timerUpdatepos.lon = mainApp.getlongtitude();
                //console.log(web_view_map.lat + " , " + web_view_map.lon);
                web_view_map.setcenter();
            }
        }

        //////////////////////////////       loader BusNavi
        Loader
        {
            id: bus_navi_loader
            anchors.fill: parent
            source: ""
            opacity: 1

            function switch_hidden()
            {
//                bus_navi_loader.opacity == 1 ? bus_navi_loader.opacity = 0 : bus_navi_loader.opacity = 1 ;
            }
        }

        ///////////////////////////////////////  GPS button          // useless in 2012.06.03
        Item {
            id: gps_button
//            x: 20
//            y: 130
//            width: 84
//            height: 84
            width: 0
            height: 0
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            anchors.leftMargin: 22
            anchors.bottomMargin: 200
            visible: false

            property bool firstuse: true

            Text {
                id: text_gps
                x: 0
                y: 15
                text: "GPS"
                anchors.centerIn: parent
                font.pixelSize: 40
            }

            Image {
                id: image_gps
                anchors.fill: parent
                opacity: 1
                source: "./image/no.png"
            }

            MouseArea {
                id: gpsmouse_area
                anchors.fill: parent
                onClicked:
                {
                    if (gps_button.firstuse)
                    {
                        mainApp.useInfobox("请设置城市");
                        rectangle_inputcity.state === 'state1' ? rectangle_inputcity.state = "" : rectangle_inputcity.state = 'state1' ;
//                        rectangle_inputcity.x = 200;
                        gps_button.firstuse = false;
                    }
    //                web_view_map.setcenter();
                    else if (timerUpdatepos.running == true)
                    {
//                        mainApp.gpsSwitch();
                        image_gps.opacity = 1;
                        timerUpdatepos.stop();
    //                    timerUpdatepos.running = false;
    //                    timerUpdatepos.repeat = false;
                    }
                    else if (timerUpdatepos.running == false)
                    {
//                        mainApp.gpsSwitch();
                        image_gps.opacity = 0;
                        timerUpdatepos.start();
    //                    timerUpdatepos.running = true;
    //                    timerUpdatepos.repeat = true;
                    }
                }
            }
        }

    }

//    //////////////////////////////       loader BusNavi and its start function &Connections
//    Loader
//    {
//        id: bus_navi_loader
//        anchors.fill: parent
//        source: ""
//        opacity: 1

//        function switch_hidden()
//        {
//            bus_navi_loader.opacity == 1 ? bus_navi_loader.opacity = 0 : bus_navi_loader.opacity = 1 ;
//        }
//    }

    function set_bus_navi_loader()
    {
        bus_navi_loader.source = "BusNavi.qml";
//        bus_navi_loader.item.set_model(data_container.bus_in_array, data_container.bus_inxy_array
//                                       , data_container.bus_linename_array, data_container.bus_out_array
//                                       , data_container.bus_outxy_array);
    }

    Connections
    {
        target: bus_navi_loader.item

        onCloseAndClear:
        {
            bus_navi_loader.source = "";
            web_view_map.evaluateJavaScript("map.clearAll()");
        }
    }

    //////////////////////////////       button which switch between two interfaces  // useless in 2012.06.03
    Rectangle
    {
//        width: 100; height: 60
        width: 0; height: 0
//        color: "red"
//        x:parent.width - 100
//        y:parent.height - 100
        anchors.right: parent.right
        anchors.rightMargin: 10
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
        radius: 30
        gradient: Gradient {
            GradientStop {
                position: 0.00;
                color: "#ff0000";
            }
            GradientStop {
                id: gstop
                position: 0.34;
                color: "#ffef07";
            }
            GradientStop {
                position: 0.78;
                color: "#1f87fd";
            }
            GradientStop {
                position: 1.00;
                color: "#ffffff";
            }
        }
        //        anchors.leftMargin: 0
//        anchors.bottomMargin: 0
        visible: false

        Text {
            id: morefunction
            text: "更多功能"
            anchors.centerIn: parent
        }

        MouseArea {
            id: mouseAreaSE
            anchors.fill: parent
            onClicked:
            {
                web_view_map.state === 'state1' ? web_view_map.state = "" : web_view_map.state = 'state1' ;
                inputpanel.state === 'state1' ? inputpanel.state = "" : inputpanel.state = 'state1' ;
                //item1.state == 'state1' ? item1.state = "" : item1.state = 'state1' ;
            }

        }

        states: State {
            name: "pressed"
            when: mouseAreaSE.pressed
            PropertyChanges { target: gstop; color: "black" }
        }

    }

    //////////////////////////////       second interface : data search panel
    Item {
        id: inputpanel
        width: parent.width
        height: parent.height
        y:0
        x:parent.width
//        color: "#034eb7"
//        gradient: Gradient {
//            GradientStop {
//                position: 0.00;
//                color: "#060076";
//            }
//            GradientStop {
//                position: 0.27;
//                color: "#489aff";
//            }
//            GradientStop {
//                position: 0.71;
//                color: "#14639a";
//            }
//            GradientStop {
//                position: 1.00;
//                color: "#00a9af";
//            }
//        }
        clip: true

        Loader
        {
            id: datapanel_bg_loader
            source:
            {
                switch (data_container.setting_style)
                {
                case "darkblue":
                    "./style_qml/BgStyleDarkblue.qml";
                    break;
                case "black":
                    "./style_qml/BgStyleBlack.qml";
                    break;
                case "darkgreen":
                    "./style_qml/BgStyleDarkgreen.qml";
                    break;
                case "darkred":
                    "./style_qml/BgStyleDarkred.qml";
                    break;
                case "darkyellow":
                    "./style_qml/BgStyleDarkyellow.qml";
                    break;
                default:
                    "./style_qml/BgStyleDarkblue.qml";
                    break;
                }
            }
        }

        /////////////////////  state 1 : left right position
        states: [
            State {
                name: "state1"
                PropertyChanges {
                    target: inputpanel
                    x:0
                }
            }
        ]

        /////////////////////  transition for state 1
        transitions: [
            Transition {
                from: ""
                to: "state1"
                NumberAnimation
                {
                    property: "x";
                    duration: 300
                    easing.type: "OutQuad"
                }
            },

            Transition {
                from: "state1"
                to: ""
                NumberAnimation
                {
                    property: "x"
                    duration: 300
                    easing.type: "OutQuad"
                }
            }
        ]

// some of the deprecated code moved to another file

        ListView {
            id: list_view_pages
            x: 0
            y: 0
            width: parent.width
            height: parent.height - 87
            contentHeight: height
            contentWidth: parent.width * 2
            clip: true
            cacheBuffer: 3
            flickableDirection: Flickable.HorizontalFlick
            boundsBehavior: Flickable.StopAtBounds
            snapMode: ListView.SnapOneItem
            orientation: ListView.Horizontal
            delegate: delegate_pages
            model: model_pages
        }

        ListModel
        {
            id: model_pages

            ListElement
            {
                text_string: "pagemodel_0"
                page_model: "pagemodel_0"
            }

            ListElement
            {
                text_string: "pagemodel_1"
                page_model: "pagemodel_1"
            }
        }

        Component
        {
            id: delegate_pages
            Loader
            {
                width: root.width - 30
                height: root.height - 87

                source:
                {
                    switch (index)
                    {
                    case 0 :
                        "./SearchPage.qml";
                        break;
                    case 1 :
                        "./RoutePage.qml";
                        break;
                    }
                }
            }
        }
    }


    //////////////////////////////       new bottom menu for meego N9    // 2012.06.03
    BottomMenu
    {
        id: bottom_menu
        width: parent.width
//        height: 86
        x: 0
//        y:
        anchors.top: parent.bottom
        anchors.topMargin: -87

        function move_updown()
        {
            bottom_menu.anchors.topMargin == -87 ? bottom_menu.anchors.topMargin = -300 : bottom_menu.anchors.topMargin = -87;
        }

//        function switch_state(statename)
//        {
//            bottom_menu.state = statename;
//        }

        /////////////////////  state
//        states: [
//            State {
//                name: "expand"
//                PropertyChanges {
//                    target: bottom_menu
//                    anchors.topMargin: -300
//                }
//            },

//            State {
//                name: "hide"
//                PropertyChanges {
//                    target: bottom_menu
//                    anchors.topMargin: -3
//                }
//            }
//        ]

        Behavior on anchors.topMargin {
            PropertyAnimation { duration: 200; easing.type: Easing.OutQuad }
        }

        onMenu_up_down:
        {
//            bottom_menu.anchors.topMargin == -87 ? bottom_menu.anchors.topMargin = -300 : bottom_menu.anchors.topMargin = -87;
//            bottom_menu.state == "expand" ? bottom_menu.state = "" : bottom_menu.state = "expand" ;
            move_updown();
        }

        onSwitch_panel:
        {
//            web_view_map.state === 'state1' ? web_view_map.state = "" : web_view_map.state = 'state1' ;
//            inputpanel.state === 'state1' ? inputpanel.state = "" : inputpanel.state = 'state1' ;
            switch_map_panel();
            bus_navi_loader.switch_hidden();
        }

        onMy_position_info:
        {
            sogou_convertAddress();
            move_updown();
            web_view_map.setcenter();
        }

        onAboutme:
        {
//            var bound = web_view_map
//            web_view_map.evaluateJavaScript("getboundforqml()");
//            set_notification_loader(1000, js.mapbounds);
            loader_about_help.set_loader_about();
            move_updown();
        }

        onHelpme:
        {
            loader_about_help.set_loader_help();
            move_updown();
        }

        onOpen_setting:
        {
            set_setting_panel_loader();
            move_updown();
        }
    }

    //////////////////////////////       loader notification and its start function &Connections
    Loader
    {
        id: notification_loader
        z: 2
//        anchors.fill: parent
        anchors.top: parent.top
        anchors.topMargin: 10
        anchors.horizontalCenter: parent.horizontalCenter
        source: ""
    }

    function set_notification_loader(time, str)
    {
        notification_loader.source = "";
        notification_loader.source = "NotificationBar.qml";
        notification_loader.item.start_notification(time, str);
    }

    Connections
    {
        target: notification_loader.item

        onCloseMe:
        {
            notification_loader.source = "";
        }
    }

    //////////////////////////////       loader PositionInfoPanel and its start function &Connections
    Loader
    {
        id: position_info_loader
        anchors.fill: parent
        source: ""
    }

    function set_position_info_loader(
        in_street, in_district, in_city, in_province)
    {
        position_info_loader.source = "PositionInfoPanel.qml";
        position_info_loader.item.set_position_info(in_street, in_district, in_city, in_province);
    }

    Connections
    {
        target: position_info_loader.item

        onCloseMe:
        {
            position_info_loader.source = "";
        }
    }

    //////////////////////////////       loader SettingPanel and its start function &Connections
    Loader
    {
        id: setting_panel_loader
//        anchors.fill: parent
        anchors.fill: parent
        source: ""
    }

    function set_setting_panel_loader(/*time, str*/)
    {
        setting_panel_loader.source = "SettingPanel.qml";
//        setting_panel_loader.item.start_notification(time, str);
    }

    Connections
    {
        target: setting_panel_loader.item

        onCloseMe:
        {
            setting_panel_loader.source = "";
        }
    }

    /////////////////////////////////////   help and about
    Loader
    {
        id: loader_about_help
        source: ""

        function set_loader_help()
        {
            loader_about_help.source = "Help.qml";
        }

        function set_loader_about()
        {
            loader_about_help.source = "About.qml";
        }
    }

    Connections
    {
        id: con_help_about
        target: loader_about_help.item

        onCloseMe:
        {
            loader_about_help.source = "";
        }
    }

}
